<template>
  <ul class="menu">

    <router-link :to="{path:menu.path}" v-for="(menu, key, index) in menus" :key="index">

      <li class="pointer" @click="selectIdx = key" :class="{'select':selectIdx === key}">
        <div class="center">
          <span :class="menu.icon"></span>
          <div>{{menu.name}}</div>
        </div>
      </li>

    </router-link>

  </ul>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          path: "/",
          name: "仪表盘",
          icon: "icon-dashboard"
        },
        {
          path: "/Role",
          name: "角色管理",
          icon: "icon-role"
        },
        {
          path: "/Product",
          name: "产品管理",
          icon: "icon-member"
        },
        {
          path: "/Order",
          name: "订单管理",
          icon: "icon-order"
        },
      ],
      selectIdx: 0
    };
  },
  created() {
    this.setIdx();
  },
  watch: {
    $route() {
      this.setIdx();
    }
  },
  methods: {
    setIdx() {
      this.selectIdx = this.$route.meta.index;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/css/common.scss";

.menu {
  background: {
    image: url("../assets/images/menu_bg.png");
    repeat: repeat-x;
  }
  li {
    position: relative;
    height: 60px;
    color: #fff;
    transition: all $transitionTime;
    &.select {
      background-color: $menuHover !important;
    }
    &.select::after {
      transform: translate(98%, -50%);
      opacity: 1;
    }
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient($menuHover 0, transparent 60%);
      transition: all $transitionTime;
      transform: scale(0);
      transform-origin: 50% 50%;
    }
    &:hover::before {
      transform: scale(1);
    }
    .center {
      width: 100%;
      text-align: left;
      padding: 0 20px;
      span {
        font-size: 24px;
        vertical-align: middle;
        color: #ffffff;
        &::before {
          color: #ffffff;
        }
      }
      img {
        width: auto;
      }
      div {
        margin-left: 10px;
        display: inline;
      }
    }
  }
}
</style>
